{{include './index_header.html' '登录'}}
<style>
    #Mine{
        display: none;
    }
    .userPic{
        margin: 15px 0;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        overflow: hidden;
        /* height: 100px; */
        background-color: rgb(224, 224, 224);
        position: relative;
        left: calc(50% - 50px);
    }
    .userPic img{
        width: 100%;
        position: relative;
    }
    #userName{
        background-color: #fff;
        justify-content: center;
        padding-bottom: 20px;
        padding-top: 20px;
    }
</style>
<div class="mui-content" id="loginForm">
    <div class="mui-card-content">
            <img src="./img/yuantiao.jpg" alt="">
    </div>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>用户名</label>
        <input type="text" class="mui-input-clear" autocomplete="off"  placeholder="请输入用户名" name="name">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input type="password" class="mui-input-password" autocomplete="off"  placeholder="请输入密码" name="psw">
        </div>
        <div class="mui-button-row">
            <button type="submit" class="mui-btn mui-btn-primary" id="login" >登录</button>
            <button type="button" class="mui-btn mui-btn-success" id="register" >注册</button>
        </div>
    </form>
</div>

<div class="mui-content" id="Mine">
    <div class="mui-row">
        <div class="mui-col-xs-12">
            <div class="userPic">
                {{if data}}
                <img src="{{data.pic}}" alt="">
                {{/if}}
            </div>
            
        </div>
        {{if data}}
        <div class="mui-card-footer" id="userName">用户名：{{data.name}}</div>
        {{/if}}
    </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" id="upload">上传/修改头像</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" id="alterPsw">修改密码</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" id="logout">退出登录</a>
            </li>
        </ul>
</div>

<script>
    var name = $.cookie('name')
    console.log(name);
    if(name && name != 'undefined'){
        $('#loginForm').hide()
        $('#Mine').show()
        // $('#userName').html('用户名：'+name)
        if($('.userPic').height() > $('.userPic img').height()){
            $('.userPic img').css({top:($('.userPic').height() - $('.userPic img').height()) / 2+'px'})
        }
        $('.mui-title').html('我的')
    }
    $('#register').click(function(){
        location.href = '/register'
    })
    $('form').submit(function(e){
        e.preventDefault()
        var info = $(this).serialize()
        $.post('/user/login',info,(data)=>{
            mui.alert(data.msg,'系统提示','确定',function(){
                if(data.code == 1){
                    location.reload()
                }
            })
        })
    })
    $('#logout').click(function(){
        mui.confirm('退出登录','系统提示',['确定','取消'],function(e){
            if(e.index == 0){
                $.get('/user/logout',(data)=>{
                    mui.alert(data,'系统提示','确定',function(){
                            location.reload()
                    })
                })
            }
            
        })
        
    })
    $('#alterPsw').click(function(){
        location.href = '/register'
    })
    $('#upload').click(function(){
        location.href = '/upload'
    })

</script>
</body>
</html>